import React, { Component } from 'react';
import { Button, Form, Input, Checkbox, Switch, Spin } from 'antd'
import { messages } from "share/common";
const FormItem = Form.Item;
const Group = Checkbox.Group;
import 'styles/supplier-management/new-consumer-management/edit-frams/edit-frame.scss'
import NewConsumerServer from '../new-consumer-server'

class MeiyaEditFrame extends Component{

  constructor(props){
    super(props);
    this.isLock = false;
    this.options = [
      { label: messages('request.key325'/*机票*/), value: 'AIR' },
      { label: messages('request.key414'/*酒店*/), value: 'HOTEL' },
    ];
    this.state = {
      editData: {},
      loading: false,
    }
  }

  componentWillReceiveProps(nextProps){
    const { params } = nextProps;
    this.setState({editData: JSON.parse(JSON.stringify(params))})
    if(!params.companyCode){
      this.props.form.resetFields();
    }
  }

  onCancelEdit = () => {
    this.props.close();
    this.props.form.resetFields();
  };

  onSubmitEdit = () => {
    if(!this.isLock){
      this.isLock = true;
    } else {
      return;
    }
    this.props.form.validateFieldsAndScroll((err, values) => {
      if(!err){
        const upParams = Object.assign({},{
          companyList:[
            {
              companyOID:this.state.editData.companyOID,
              companyName:values.companyName,
            }
          ],
        }, values);
        // upParams.isOpen = Number(upParams.isOpen);
        delete upParams.companyOid;
        delete upParams.companyName;
        NewConsumerServer(this).submitEditData(upParams).then(res => {
          this.isLock = false;
          this.props.close(true);
          this.props.form.resetFields();
        });
      } else {
        this.isLock = false;
      }
    })
  };

  isOpenServer = (value) => {
    if(!value){
      this.props.form.setFieldsValue({isOpenPcSso: false});
      this.props.form.setFieldsValue({isOpenApproval: false});
      this.props.form.setFieldsValue({vendorTypes: []});
    }
  }

  render(){
    const { getFieldDecorator, getFieldValue } = this.props.form;
    const { editData, loading } = this.state;
    const formLayout = {
      labelCol: { span: 6 },
      wrapperCol: { span: 16 },
    };
    return (
      <div className='edit-frame'>
        <Spin spinning={loading}>
          <Form>
            <FormItem label={messages('components.key17'/*公司代码*/)} {...formLayout}>
              {
                getFieldDecorator('companyCode',{
                  initialValue:editData.companyCode || '',
                })(
                  <Input disabled />
                )
              }
            </FormItem>
            <FormItem label={messages('components.key18'/*公司名称*/)} {...formLayout}>
              {
                getFieldDecorator('companyName',{
                  initialValue:editData.companyName || '',
                })(
                  <Input disabled />
                )
              }
            </FormItem>
            <FormItem label={messages('supplier.key288')/*美亚公司ID*/} {...formLayout}>
              {
                getFieldDecorator('corpVendorsId',{
                  initialValue:editData.corpVendorsId || '',
                  rules:[
                    {required:true,message:messages('components.key506'/*必填*/)}
                  ]
                })(
                  <Input />
                )
              }
            </FormItem>
            <FormItem label={messages('supplier.key289')/*渠道号*/} {...formLayout}>
              {
                getFieldDecorator('channel',{
                  initialValue:editData.channel || '',
                  rules:[
                    {required:true,message:messages('components.key506'/*必填*/)}
                  ]
                })(
                  <Input />
                )
              }
            </FormItem>
            <FormItem label={messages('supplier.key290')/*H5 Key*/} {...formLayout}>
              {
                getFieldDecorator('vendorH5Key',{
                  initialValue:editData.vendorH5Key || '',
                  rules:[
                    {required:true,message:messages('components.key506'/*必填*/)}
                  ]
                })(
                  <Input />
                )
              }
            </FormItem>
            <FormItem label={messages('supplier.key291')/*Web key*/} {...formLayout}>
              {
                getFieldDecorator('vendorKey',{
                  initialValue:editData.vendorKey || '',
                  rules:[
                    {required:true,message:messages('components.key506'/*必填*/)}
                  ]
                })(
                  <Input />
                )
              }
            </FormItem>
            <FormItem style={{display:"flex",alignItems:'center'}} label={messages('setting.key1738'/*开通服务*/)} {...formLayout}>
              {
                getFieldDecorator('vendorTypes',{
                  initialValue:editData.openType || [],
                  rules:[
                    {required: getFieldValue('isOpen'),message:messages('components.key506'/*必填*/)}
                  ]
                })(<Group options={this.options}/>)
              }
            </FormItem>
            <FormItem label={messages('loan-billing.key71')/*关联申请单*/} {...formLayout}>
              {
                getFieldDecorator('isOpenApproval',{
                  initialValue:editData.isOpenApproval || false,
                  valuePropName:'checked',
                })(
                  <Switch />
                )
              }
            </FormItem>
            <FormItem label={messages('supplier.key292')/*PC端入口*/} {...formLayout}>
              {
                getFieldDecorator('isOpenPcSso',{
                  initialValue:editData.isOpenPcSso || false,
                  valuePropName:'checked',
                })(
                  <Switch />
                )
              }
            </FormItem>
            <FormItem style={{marginBottom: window.ISIE9 ? 80 : 0}} label={messages('setting.key289'/*状态*/)} {...formLayout}>
              {
                getFieldDecorator('isOpen',{
                  initialValue:editData.status || false,
                  valuePropName:'checked',
                })(
                  <Switch onChange={this.isOpenServer} />
                )
              }
            </FormItem>
          </Form>
        </Spin>
        <div className='affix-bottom'>
          <Button onClick={this.onCancelEdit}>
            {messages('common.cancel')/*取消*/}
          </Button>
          &nbsp;&nbsp;&nbsp;&nbsp;
          <Button type="primary"  onClick={this.onSubmitEdit}>
            {messages('common.ok')/*确定*/}
          </Button>
        </div>
      </div>
    )
  }
}

const wrapperMeiyaEditFrame = Form.create()(MeiyaEditFrame);

wrapperMeiyaEditFrame.getEditData = record => {
  const params = JSON.parse(JSON.stringify(record));
  if(params.openType) {
    params.openType = params.openType.split('|');
  }
  params.status = params.status > 0;
  return params;
};

export default wrapperMeiyaEditFrame;
